<!-- <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style> -->
<template>
  <div id="root">
     <h1 v-text="message" ref="title"></h1> <!--通过v-text给标签中填充属性-->
     <h2>学生姓名:{{ studentName }}</h2>
     <h2>学生年龄:{{ studentAge }}</h2>
     <button @click="showStudentName">点我提示学生姓名</button>
     <button @click="showDom">点我获取dom元素</button>
     <School ref="vcomponent"></School>
     <School id="vue-hello"></School>
   </div>
</template>

<script>
import School from "./components/School"
//汇总组件
export default {
   name:"App",
   data:function(){
      return {
        message:"武汉科技大学",
        studentName:"zhangsan",
        studentAge:23
      }
   },
   components:{
    School
   },
   methods:{
      showStudentName(){
        alert(this.studentName)
      },
      showDom(){
        //dom元素包含html原生dom和vue的组件dom对象，要想通过VC获取dom元素可以使用ref打标签
        //使用原生的获取dom元素的方式，此时需要通过id给dom元素打上标记
        console.log(document.getElementById("root"));
        console.log(this) //此处的this对象就是vueComponent对象 其中标记ref属性的dom元素会被放在 this.$refs下
        console.log(this.$refs.title)

        console.log(this.$refs.vcomponent) //获取vue组件的dom元素 此时获取的就是一个vueComponent
        //如果在vue组件标签上使用id打标记获取到的dom元素是html的原生dom对象 <div class="demo">
        console.log(document.getElementById("vue-hello")); 
        
      }
   }
  
}
</script>

<style>

</style>

